<template>

<div>
  <div class="head" style="display: flex;flex-direction: row;gap: 0.3rem;width: 90%;
    margin: auto;
    padding: 0.3rem;" >
    <img
        style="    height: 1.3rem;
    width: 1.3rem;
    border-radius: 50%;"
        :src="require('@/assets/img/default-avatar.png')"
      class="avatar"
        @click="this.$router.push('/coupon-publish')"
    />
    <div style="display: flex;
  flex-direction: column;
      gap: 0.1rem;
    font-size: 0.3rem;padding-top:0.3rem;"
    class="user-info">
      <span style="color:#cccccc;">昵称</span>
      <span style="color:#cccccc;">会员号:10</span>
    </div>

    <div style="font-size: 0.3rem;
    position: absolute;
    right: 1rem;
    background: yellow;
    padding: 0.15rem 0.15rem;
    border-radius: 3rem;
    font-weight: 600;
    top: 0.35rem;">信用良好</div>

  </div>
  <div class="head-menu-wrap">
    <el-row>
      <el-col :span="6">
        <div class="head-menu-item grid-content ep-bg-purple">
          <div class="head-menu-item-head">34</div>
          <div class="head-menu-item-body">浏览记录</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="head-menu-item grid-content ep-bg-purple">
          <div class="head-menu-item-head">12</div>
          <div class="head-menu-item-body">我的贴子</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="head-menu-item grid-content ep-bg-purple">
          <div class="head-menu-item-head">87.5</div>
          <div class="head-menu-item-body">我的钱包</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="head-menu-item grid-content ep-bg-purple">
          <div class="head-menu-item-head">3</div>
          <div class="head-menu-item-body">我的举报</div>
        </div>
      </el-col>
    </el-row>

    <div class="body-menu-wrap">
      <div style="display: flex;" class="body-menu-wrap-head">
        <div style="font-size: 0.5rem;margin-left: 0.3rem;" class="my-trade">我的交易</div>
        <div style="position:relative;margin-left: 0.16rem;"><div style="font-size: 0.26rem;position: absolute;
    bottom: 0;
    width: max-content;color: #ccc;">成交20笔订单</div></div>
      </div>

      <div>
        <el-row>
          <el-col :span="6">
            <div class="body-menu-item grid-content ep-bg-purple">
              <div class="body-menu-item-head"><el-icon><Promotion /></el-icon></div>
              <div class="body-menu-item-body">我发布的</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="body-menu-item grid-content ep-bg-purple">
              <div class="body-menu-item-head"><el-icon><Money /></el-icon></div>
              <div class="body-menu-item-body">我卖出的</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="body-menu-item grid-content ep-bg-purple">
              <div class="body-menu-item-head"><el-icon><ShoppingBag /></el-icon></div>
              <div class="body-menu-item-body">我买到的</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="body-menu-item grid-content ep-bg-purple">
              <div class="body-menu-item-head"><el-icon><Star /></el-icon></div>
              <div class="body-menu-item-body">我的收藏</div>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <div class="body-menu-item grid-content ep-bg-purple">
              <div class="body-menu-item-head"><el-icon><Shop /></el-icon></div>
              <div class="body-menu-item-body">代金券</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="body-menu-item grid-content ep-bg-purple">
              <div class="body-menu-item-head"><el-icon><SoldOut /></el-icon></div>
              <div class="body-menu-item-body">一键转卖</div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="10">
        <el-col :span="24">
          <img :src="img1" style="width: 100%;border-radius: 0.3rem;" />
        </el-col>
      </el-row>

        <el-row :gutter="10">
          <el-col :span="13">
            <img :src="img2" style="width: 100%;border-radius: 0.3rem;" />
          </el-col>

          <el-col :span="11">
            <img :src="img3" style="width: 100%;border-radius: 0.3rem;" />
          </el-col>

        </el-row>

      </div>

    </div>

  </div>

</div>

</template>>

<script>
import {Money, Promotion, Shop, ShoppingBag, SoldOut, Star} from "@element-plus/icons-vue";
import Mock from "mockjs";
import {_randomImageColor} from "@/api/webApi";

export default {
  name:"AppMine",
  components: {SoldOut, Shop, Star, ShoppingBag, Money, Promotion},
  data(){
    return {
      img1:null,
      img2:null,
      img3:null
    }

  },
  created(){
    console.log('created')
    console.log(_randomImageColor())
    this.img1 = Mock.Random.image('200x60', _randomImageColor())
    this.img2 = Mock.Random.image('200x170', _randomImageColor())
    this.img3 = Mock.Random.image('200x200', _randomImageColor())
  }
}
</script>

<style scoped>
.head-menu-wrap{
  background: #FAFAFA;
  /* font-family: '微软雅黑', "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; */
  border-radius: 0.3rem 0.3rem 0rem 0rem;
  width: 90%;
  margin: auto;
  padding-bottom: 0.3rem;
}
.head-menu-item{
  font-size: 0.3rem;
  text-align: center;
  font-weight: 500;
  padding-top: 0.26rem;
}
.head-menu-item-head{}
.head-menu-item-body{}

.body-menu-wrap{
  border-radius: 0.3rem 0.3rem 0rem 0rem;
  background: #F5F7FA;
}
.body-menu-wrap-head{}
.body-menu-wrap-body{}
.body-menu-item{
  font-size: 0.3rem;
  text-align: center;
  margin-top:0.3rem;
}
.body-menu-item-head{}
.body-menu-item-bodys{}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>